import React, { Component } from 'react';
import {InputItem ,Button ,Toast} from 'antd-mobile';
import { createForm } from 'rc-form';
import { cardSetUser } from './actions';

import styles from './exchange.css'

class BaseExChange extends Component {


    componentDidMount(){
        
    }

    submit = () => {
        this.props.form.validateFields((error, value) => {
            console.log(error, value);

            cardSetUser(value.cardNum).then((data) => {
                Toast.info('兑换成功')
            })
        });
    }

    render(){
        const { getFieldProps } = this.props.form;
        return <div style={{padding:10,margin:10,backgroundColor:'white'}}>
                <div className={styles.title}>
                    兑换码
                </div>
                <div className={styles.inputContainer}>
                <InputItem
                    {...getFieldProps('cardNum')}
                    clear
                    placeholder="输入兑换码号码"
                    ref={el => this.autoFocusInst = el}
                ></InputItem>
                </div>
                <Button onClick={() => {this.submit()}}  style={{marginTop:'20px', marginBottom:'10px'}} type="primary">兑  换</Button>
        </div>
    }

}

const ExChange = createForm()(BaseExChange);

export default ExChange;